<template>
  <div class="editor-toolbar">
    <div class="toolbar-left">
      <el-button-group class="history-group">
        <el-button :disabled="!canUndo" @click="handleUndo" title="撤销">
          <el-icon><Back /></el-icon>
        </el-button>
        <el-button :disabled="!canRedo" @click="handleRedo" title="重做">
          <el-icon><Right /></el-icon>
        </el-button>
      </el-button-group>

      <el-divider direction="vertical" />

      <el-button-group>
        <el-button
          v-for="command in commands"
          :key="command.name"
          @click="command.action"
          :title="command.name"
        >
          {{ command.icon }}
        </el-button>
      </el-button-group>
    </div>
    <div class="toolbar-right">
      <el-tooltip content="清空文章内容与历史记录">
        <el-button @click="clearArticleAndHistory">
          <el-icon><Delete /></el-icon>
        </el-button>
      </el-tooltip>
      <el-button @click="$emit('download')" title="下载">
        <el-icon><Download /></el-icon>
      </el-button>
      <el-button
        @click="$emit('toggle-preview')"
        :type="props.isPreview ? 'primary' : 'default'"
      >
        {{ props.isPreview ? "返回编辑" : "预览" }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Back, Right, Download, Delete } from "@element-plus/icons-vue";
import type { Command } from "@/types/editor";
import { useEditorStore } from "@/stores/editor";
import { useArticleStore } from "@/stores/article";
import { deleteArticleHistory } from "@/services/historyService";
import { ElMessageBox, ElMessage } from "element-plus";

const props = defineProps<{
  isPreview: boolean;
}>();

const emit = defineEmits<{
  (e: "execute", command: string, value?: string): void;
  (e: "toggle-preview"): void;
  (e: "download"): void;
}>();

const editorStore = useEditorStore();
const { canUndo, canRedo } = storeToRefs(editorStore);

const articleStore = useArticleStore();
const { activeArticle } = storeToRefs(articleStore);

const handleUndo = () => {
  emit("execute", "undo");
};

const handleRedo = () => {
  emit("execute", "redo");
};

const commands = ref<Command[]>([
  {
    name: "粗体",
    icon: "B",
    action: () => emit("execute", "bold"),
  },
  {
    name: "斜体",
    icon: "I",
    action: () => emit("execute", "italic"),
  },
  {
    name: "下划线",
    icon: "U",
    action: () => emit("execute", "underline"),
  },
  {
    name: "标题1",
    icon: "H1",
    action: () => emit("execute", "formatBlock", "h1"),
  },
  {
    name: "标题2",
    icon: "H2",
    action: () => emit("execute", "formatBlock", "h2"),
  },
  {
    name: "引用",
    icon: '"',
    action: () => emit("execute", "formatBlock", "blockquote"),
  },
  {
    name: "有序列表",
    icon: "1.",
    action: () => emit("execute", "insertOrderedList"),
  },
  {
    name: "无序列表",
    icon: "•",
    action: () => emit("execute", "insertUnorderedList"),
  },
]);

const clearArticleAndHistory = async () => {
  await ElMessageBox({
    message: h("div", null, [
      h(
        "p",
        null,
        `确定要清除 《${
          articleStore.getActiveArticle()?.title
        }》 文章内容及其所有历史记录吗？`
      ),
      h("p", { style: "color: red;" }, "该操作无法撤回，请慎重！"),
    ]),
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showCancelButton: true,
  });

  await editorStore.forceClearContent();
  await deleteArticleHistory(activeArticle.value);

  ElMessage.success("文章内容及其历史记录已清除");
};
</script>

<style scoped>
.editor-toolbar {
  @apply flex p-2 bg-[var(--el-bg-color)] justify-between items-center gap-2;
}

.toolbar-left {
  @apply flex gap-2 items-center flex-1;
}

.history-group .el-button {
  padding: 8px;
}

.history-group .el-icon {
  font-size: 16px;
}

.toolbar-right {
  @apply flex-shrink-0;
}

:deep(.el-button) {
  height: 32px;
  padding: 0 12px;
}

.history-controls {
  @apply flex gap-2 items-center;
}
</style>
